<style scoped lang="less">
.area-blk {
  padding: 0;
}
.setting-nav-wrap {
  padding: 10px 0 0;
  .unit-tree {
    padding: 0 10px;
    overflow: auto;
  }
  .unit-search {
    padding: 0 10px;
  }
}
.setting-nav {
  .icon {
    width: 16px;
    vertical-align: center;
    opacity: 0.9;
  }
}
</style>

<style lang="less">
.unit-search {
  margin-bottom: 10px;
  .el-input__inner {
    background: #0c276c;
    border-color: #0c276c;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    &:hover {
      background: #0c276c;
      border-color: #0c276c;
    }
  }
  .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
<template>
  <div class="page-census page-setting">
    <el-container :style="{ height: mainH + 'px' }">
      <div>
        <div class="flex">
          <div
            class="unitTab"
            :style="{ background: tabIndex == 1 ? 'rgb(3 70 153)' : '' }"
            @click="handleTab(1)"
          >
            单位
          </div>
          <div
            class="unitTab"
            :style="{ background: tabIndex == 2 ? 'rgb(3 70 153)' : '' }"
            @click="handleTab(2)"
          >
            公共区域
          </div>
        </div>
        <el-aside
          class="setting-nav-wrap"
          width="200px"
          v-if="siteInfos.userType == 1"
        >
          <div class="unit-tree">
            <UnitList
              v-if="tabIndex == 1"
              :height="mainH - 110"
              @select="onUnitSelect"
              ref="unitList"
            ></UnitList>
            <areaTree
              v-else
              @nodeClick="areaClickAction"
              ref="areaTreeList"
            ></areaTree>
          </div>
        </el-aside>
      </div>
      <el-main class="setting-main">
        <div class="crumbs">
          <router-link to="/">首页</router-link> /
          <span class="active">应急指挥</span>
        </div>
        <el-container :style="{ height: mainH - 40 + 'px' }">
          <el-aside class="area-blk" width="250px">
            <ul class="setting-nav">
              <router-link
                tag="li"
                :to="'/emergency?type=' + (index + 1) + '&title=应急指挥'"
                :class="{ active: type == index + 1 }"
                v-for="(item, index) in navList"
                :key="index"
              >
                <span :class="`iconfont ${item.icon}`" /> {{ item.name }}
              </router-link>
            </ul>
          </el-aside>
          <el-main class="census-main">
            <div class="opers flex v-c">
              <el-form :inline="true" class="filter-blk flex-1">
                <el-form-item label="名称">
                  <el-input
                    placeholder="请输入名称"
                    v-model.trim="filterForm.name"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getData">
                    <i class="iconfont icon-search"></i> 查询
                  </el-button>
                  <el-button
                    type="blue"
                    @click="newAction"
                    :class="{ 'is-disabled': !hasUnit }"
                    :disabled="!$store.getters.hasEditPermission"
                  >
                    <i class="iconfont icon-add"></i> 添加
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <div
              style="height: 100px;"
              v-if="loading"
              v-loading="loading"
            ></div>
            <el-table
              v-else
              ref="tableRef"
              :data="dataList"
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column type="index" label="序号" align="center">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <template v-if="type == '1'">
                <el-table-column
                  prop="name"
                  label="场所名称"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="capacity"
                  label="容纳人数"
                  width="240"
                  align="center"
                ></el-table-column>
              </template>

              <template v-else-if="type == '2'">
                <el-table-column
                  prop="name"
                  label="物资名称"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="amount"
                  label="物资数量"
                  width="240"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="type"
                  label="物资种类"
                  width="240"
                  align="center"
                >
                  <template slot-scope="scope">{{
                    scope.type == 1 ? "重要物资" : "一般物资"
                  }}</template>
                </el-table-column>
              </template>

              <template v-else-if="type == '3'">
                <el-table-column
                  prop="name"
                  label="专家姓名"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="gender"
                  label="专家性别"
                  width="240"
                  align="center"
                >
                  <template slot-scope="scope">{{
                    scope.gender == 1 ? "男" : "女"
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="age"
                  label="专家年龄"
                  width="240"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="phone"
                  label="专家电话"
                  width="240"
                  align="center"
                ></el-table-column>
              </template>

              <template v-else-if="type == '4'">
                <el-table-column
                  prop="name"
                  label="应急队伍名称"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="number"
                  label="队伍容纳人数"
                  width="240"
                  align="center"
                ></el-table-column>
              </template>
              <template v-else>
                <el-table-column
                  prop="name"
                  label="消防站名称"
                  width="200"
                  align="center"
                ></el-table-column>
              </template>
              <template v-if="type !== '3'">
                <el-table-column
                  prop="principal"
                  label="负责人"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="principalPhone"
                  label="负责人电话"
                  width="200"
                  align="center"
                ></el-table-column>
              </template>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="editAction(scope.row)"
                    :class="{ 'is-disabled': !hasUnit }"
                    :disabled="!$store.getters.hasEditPermission"
                  >
                    编辑
                  </el-button>

                  <el-button
                    type="red"
                    @click="deleteAction(scope.row)"
                    :disabled="!$store.getters.hasEditPermission"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="total > 0"
              class="text-right mt-20 mr-20"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, total, jumper"
              :total="total"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <!-- 添加/编辑 start -->
    <el-dialog
      v-if="newModalVisible"
      :title="newModalTitle"
      :visible.sync="newModalVisible"
      width="550px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <New
        ref="newData"
        :types="tabIndex"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
      ></New>
      <div slot="footer">
        <el-button type="cancel" @click="newModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submitAction">确定</el-button>
      </div>
    </el-dialog>
    <!-- 添加/编辑 end -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import New from "./components/new.vue";
import UnitList from "@/components/equipment/UnitList.vue";
import areaTree from "@/components/census/AreaTree.vue";

export default {
  name: "Equipment",
  components: {
    New,
    UnitList,
    areaTree,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      type: this.$route.query.type || 1,
      unitData: [],
      unitKeyword: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      activeUnitId: "",
      activeUnit: {},
      defaultExpandedKeys: ["0"],
      navList: [
        {
          icon: "icon-place",
          name: "应急场所",
        },
        {
          icon: "icon-goods",
          name: "应急物资",
        },
        {
          icon: "icon-expert",
          name: "应急专家",
        },
        {
          icon: "icon-team",
          name: "应急团队",
        },
        {
          icon: "icon-fireStation",
          name: "微型消防站",
        },
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      filterForm: {},
      dataList: [],
      loading: false,
      newModalVisible: false,
      activeData: null,
      listUrl: "",
      detailtUrl: "",
      delUrl: "",
      tabIndex: 1,
      area: "0",
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
    mainH() {
      return this.winH - 180;
    },
    hasUnit() {
      return this.siteInfos.userType != 1 || this.activeUnit;
    },
  },
  watch: {
    $route(to, from) {
      this.type = to.query.type;
      this.getData(1);
    },
  },
  created() {
    // this.getData(1);
  },
  methods: {
    areaClickAction(data, level, areaNames) {
      this.area = data.allid;
      this.activeUnit = data;
      this.getData(1, data.id);
    },
    handleTab(index) {
      this.tabIndex = index;
      if (this.tabIndex == 2) {
        this.getData(1);
      }
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    // getDataById(id, cbk) {
    //   this.$get(this.detailtUrl, {
    //     id: id,
    //   }).then(
    //     (res) => {
    //       let thisData = res.data;
    //       cbk && cbk(thisData);
    //     },
    //     (err) => {
    //       //
    //     }
    //   );
    // },
    editAction(item) {
      //   if (!this.hasUnit) {
      //     this.$message.error("请选择企业");
      //     return;
      //   }
      // this.getDataById(item.id, (data) => {
      this.activeData = item;
      this.newModalTitle = "编辑";
      this.newModalVisible = true;
      // });
    },
    deleteAction(item) {
      this.showConfirm("确定删除该数据吗？", () => {
        this.$post("/emergencyCommand/emergencyCommandDel", {
          id: item.id,
        }).then(
          (res) => {
            this.$message.success("删除成功");
            this.getData(this.currentPage);
          },
          (err) => {
            this.$message.error(err.msg);
          }
        );
      });
    },
    submitSuccessAction() {
      this.adding = false;
      this.newModalVisible = false;
      this.getData(this.currentPage);
    },
    submitAction() {
      this.$refs.newData.submitAction();
    },
    newAction() {
      if (this.siteInfos.userType == 1 && !this.activeUnit) {
        this.$message.error("请选择企业");
        return;
      }
      this.activeData = null;
      this.newModalTitle = "添加";
      this.newModalVisible = true;
    },
    onUnitSelect(data) {
      if (data) {
        this.activeUnit = data;
      } else {
        this.activeUnit = null;
      }
      this.getData(1);
    },
    getData(page) {
      this.loading = true;
      let businessId = null;
      let area = null;
      this.dataList = null;
      if (this.tabIndex == 1) {
        if (this.siteInfos.userType == 1) {
          businessId = this.activeUnit ? this.activeUnit.id : null;
        } else {
          businessId = this.siteInfos.homeId;
        }
      } else {
        area = this.area;
      }

      this.$get("/emergencyCommand/emergencyCommandListPage", {
        page: page,
        limit: this.pageSize,
        ...(businessId && { businessId }),
        ...(area && { area }),
        ...this.filterForm,
        type: this.type,
      }).then(
        (res) => {
          this.loading = false;
          this.dataList = res.data.records;
        },
        (err) => {}
      );
    },
  },
};
</script>
<style lang="less" scoped>
.flowRate {
  /deep/.el-dialog__body {
    height: 13vh !important;
  }
}
.qrCode {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
/deep/.qrCodevisible {
  .el-dialog__body {
    display: flex;
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
  }
}
.unitTab {
  padding: 0.0313rem 0.0625rem;
  // background: #0f71e2;
  background: #80b5f3;
  cursor: pointer;
  margin-bottom: 0.0313rem;
}
.area-tree {
  padding: 0px !important;
}
</style>
